body.modal-opened {
	overflow: hidden;
}

.modal-wrapper {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1000;
	overflow-x: auto;
	overflow-y: scroll;

	&.rserror {
		.modal-header h3 {
			color: #B94A48;
		}
	}

	&.success {
		.modal-header h3 {
			color: green;
		}
	}

	.modal-outer {
		display: table;
		height: 100%;
		width: 100%;

		.modal-inner {
			display: table-cell;
			text-align: center;
			vertical-align: middle;
			width: 100%;

			.modal-container {
				display: inline-block;
				margin: 20px 0;
				outline: medium none;
				text-align: left;
				position: relative;

				min-width: 560px;
				max-width: 50%;
				background-color: @white;
				border: 1px solid #999;
				border: 1px solid rgba(0, 0, 0, .3);
				*border: 1px solid #999; /* IE6-7 */
				.border-radius(6px);
				.box-shadow(0 3px 7px rgba(0, 0, 0, 0.3));
				.background-clip(padding-box);

				.modal-header {
					padding: 9px 15px;
					border-bottom: 1px solid #eee;
					// Close icon
					.close {
						margin-top: 2px;
					}
					h3 {
						line-height: @baseLineHeight * 1.5;
						font-size: 18px;
						margin: 0 10px 0 0;
						.ellipsis();
						small {
							font-size: 14px;
						}
					}
				}

				.modal-body {
					font-size: 13px;
					padding: 15px;
					color: #333;
					font-weight: normal;

					.article-preview {
						p {
							margin: 0 0 15px 0;
						}

						h1.sprocket-section {
							background-color: #f9f9f9;
							border-bottom: 1px solid #eee;
							border-top: 1px solid #eee;
							color: #666;
							font-size: 15px;
							margin: 0 -15px 10px;
							padding: 10px;
							text-align: center;
							text-shadow: 0 1px 0 #fff;
							text-transform: uppercase;
						}
					}
					.modal-form {
						margin-bottom: 0;
					}
				}

				.modal-statusbar {
					padding: 14px 15px 15px;
					margin-bottom: 0;
					background-color: #f5f5f5;
					border-top: 1px solid #ddd;
					.border-radius(0 0 6px 6px);
					.box-shadow(inset 0 1px 0 @white);
					.clearfix();
					.btn {
						float: right;
						margin-left: 5px;
						margin-bottom: 0;

						&.close {
							font-weight: normal;
							.opacity(100);
						}
					}

					.indicator {
						float: left;
						margin-top: 5px;

						.spinner-16 {
							.opacity(100);
							background-image: url(../images/loader-16-transparent.gif);
						}

						span {
							float: left;

							&.message {
								color: #444;
							    margin-left: 5px;
							    text-shadow: 0 1px 0 #fff;
							}
						}
					}
				}
			}
		}
	}
}

